@if (!isListView) {
    <div
        class="card"
        [class.border-primary]="isSelected"
        [class.selectable]="isSelectable"
        (click)="selectAsset.emit()"
        [sqxDropDisabled]="!asset || !asset.canUpload"
        (sqxDropFile)="updateFile($event)"
        sqxDropNoPaste="true">
        <div class="card-body">
            @if (asset && snapshot.progress === 0) {
                <div class="file-preview">
                    @if (asset.fileType) {
                        <span class="file-type"> {{ asset.fileType }} </span>
                    }

                    @if (asset.canPreview) {
                        <div class="file-image"><img layoutKey="asset-large" [sqxImageSource]="asset | sqxAssetPreviewUrl" /></div>
                    } @else {
                        <div class="file-icon"><img [src]="asset | sqxFileIcon" /></div>
                    }

                    <div class="overlay">
                        <div class="overlay-background"></div>

                        <div class="overlay-menu">
                            @if (!isDisabled) {
                                <a class="file-edit ms-2" attr.aria-label="{{ 'common.edit' | sqxTranslate }}" (click)="emitEdit()">
                                    <i class="icon-pencil"></i>
                                </a>
                            }
                            <a
                                class="file-download ms-2"
                                attr.aria-label="{{ 'common.download' | sqxTranslate }}"
                                [href]="asset | sqxAssetUrl: asset.version : false"
                                sqxExternalLink="noicon"
                                sqxStopClick>
                                <i class="icon-download"></i>
                            </a>
                            @if (folderIcon) {
                                <a class="file-folder ms-2" (click)="selectFolder.emit(asset.parentId)"> <i class="icon-folder"></i> </a>
                            }

                            @if (!isDisabled && !removeMode && asset.canDelete) {
                                <a
                                    class="file-delete ms-2"
                                    attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
                                    confirmRememberKey="deleteAsset"
                                    confirmText="i18n:assets.deleteConfirmText"
                                    confirmTitle="i18n:assets.deleteConfirmTitle"
                                    (sqxConfirmClick)="delete.emit()">
                                    <i class="icon-delete"></i>
                                </a>
                            }

                            @if (!isDisabled && removeMode) {
                                <a
                                    class="file-delete ms-2"
                                    attr.aria-label="{{ 'common.remove' | sqxTranslate }}"
                                    confirmRememberKey="removeAsset"
                                    confirmText="i18n:assets.removeConfirmText"
                                    confirmTitle="i18n:assets.removeConfirmTitle"
                                    (sqxConfirmClick)="remove.emit()">
                                    <i class="icon-close"></i>
                                </a>
                            }
                        </div>

                        @if (asset.fileType) {
                            <span class="overlay-type"> {{ asset.fileType }} </span>
                        }

                        <div class="overlay-user">
                            <div><i class="icon-user"></i> {{ asset.lastModifiedBy | sqxUserNameRef }}</div>

                            <div>{{ asset.lastModified | sqxFromNow }}</div>
                        </div>
                    </div>

                    <div class="drop-overlay align-items-center justify-content-center">
                        <div class="drop-overlay-background"></div>

                        <div class="drop-overlay-text">{{ "assets.dropToUpdate" | sqxTranslate }}</div>
                    </div>
                </div>
            } @else if (snapshot.progress > 0) {
                <div class="upload-progress"><sqx-progress-bar mode="Circle" [value]="snapshot.progress" /></div>
            }
        </div>

        <div class="card-footer" (dblclick)="emitEdit()">
            @if (asset) {
                <div>
                    <div class="file-name truncate editable" (click)="emitEdit()">
                        @if (asset.isProtected) {
                            <i class="icon-lock"></i>
                        }
                        {{ asset.fileName }}
                    </div>
                </div>

                <div class="file-tags tags">
                    @for (tag of asset.tags; track tag) {
                        <div class="tag">{{ tag }}</div>
                    }
                </div>

                <div class="file-info">{{ asset.metadataText }}</div>
            }
        </div>
    </div>
} @else {
    <div
        class="table-items-row table-items-row-summary"
        [class.selectable]="isSelectable"
        (click)="selectAsset.emit()"
        [sqxDropDisabled]="!asset || !asset.canUpload"
        (sqxDropFile)="updateFile($event)"
        [sqxDropNoPaste]="true">
        <div class="left-border" [class.hidden]="!isSelectable" [class.selected]="isSelected"></div>

        @if (asset && snapshot.progress === 0) {
            @if (asset.canPreview) {
                <div class="image" [class.image-left]="!isSelectable">
                    <img class="bg2" layoutKey="asset-small" [sqxImageSource]="asset | sqxAssetPreviewUrl" />
                </div>
            } @else {
                <div class="image image-padded" [class.image-left]="!isSelectable"><img class="icon" [src]="asset | sqxFileIcon" /></div>
            }

            <table class="table-fixed">
                <tr>
                    <td class="col-name">
                        <div class="file-name truncate editable" (click)="emitEdit()">
                            @if (asset.isProtected) {
                                <i class="icon-lock"></i>
                            }
                            {{ asset.fileName }}
                        </div>
                    </td>

                    @if (!isCompact) {
                        <td class="col-info">
                            <div class="truncate">{{ asset.metadataText }}</div>
                        </td>

                        <td class="col-user">
                            <img class="user-picture" [src]="asset.lastModifiedBy | sqxUserPictureRef" title="{{ asset.lastModifiedBy | sqxUserNameRef }}" />
                        </td>

                        <td class="col-actions text-end">
                            <a class="btn btn-text-secondary" [href]="asset | sqxAssetUrl: asset.version : false" sqxExternalLink="noicon" sqxStopClick>
                                <i class="icon-download"></i>
                            </a>
                            @if (folderIcon) {
                                <button class="btn btn-text-secondary" (click)="selectFolder.emit(asset.parentId)" type="button">
                                    <i class="icon-folder"></i>
                                </button>
                            }
                        </td>
                    }

                    <td class="col-delete text-end">
                        @if (!isDisabled && !removeMode && asset.canDelete) {
                            <button
                                class="btn btn-text-danger"
                                confirmRememberKey="deleteAsset"
                                confirmText="i18n:assets.deleteConfirmText"
                                confirmTitle="i18n:assets.deleteConfirmTitle"
                                [disabled]="isDisabled"
                                (sqxConfirmClick)="delete.emit()"
                                type="button">
                                <i class="icon-bin2"></i>
                            </button>
                        }

                        @if (!isDisabled && removeMode) {
                            <button
                                class="btn btn-text-secondary"
                                confirmRememberKey="removeAsset"
                                confirmText="i18n:assets.removeConfirmText"
                                confirmTitle="i18n:assets.removeConfirmTitle"
                                [disabled]="isDisabled"
                                (sqxConfirmClick)="remove.emit()"
                                type="button">
                                <i class="icon-close"></i>
                            </button>
                        }
                    </td>
                </tr>
            </table>

            <div class="drop-overlay align-items-center justify-content-center">
                <div class="drop-overlay-background"></div>

                <div class="drop-overlay-text">{{ "assets.dropToUpdate" | sqxTranslate }}</div>
            </div>
        }

        @if (snapshot.progress > 0) {
            <div class="upload-progress">
                <sqx-progress-bar [showText]="false" [strokeWidth]="0.8" [trailWidth]="0.8" [value]="snapshot.progress" />
            </div>
        }
    </div>
}
